<template>
  <div id="detail">
    <com-head>{{topmes}}</com-head>
    <div class="news" v-for="(message,index) in message" @click="helpdetail(message.id)" :key="index">
      <div class="titles">{{message.title}}</div>
      <div class="content">{{message.content}}</div>
      <div class="time">{{message.add_time}}</div>
    </div>
    <com-foot :select="2"></com-foot>
  </div>
</template>

<script>
export default {
  name: 'detail',
  data () {
    return {
      topmes: '',
      message:[],
      title: '',
      add_time: '',
      content: ''
    };
  },
  created: function(){
			// 帮助中心
			this.details();
  } ,
  methods: {
  details(){
    this.topmes='帮助中心';
    this.axios.post('Index/help')
    .then((response) => {
      console.log(response)
    this.message=response.data;
    }).catch(function(error) {
      console.log(error);
    });
  },
  helpdetail(id){
    this.$router.push({name:'detail',query:{id: id}});
  }
}
};
</script>
<style lang="scss">
  #detail {
    padding-top: 67px;
    background: white;
    .news {
        margin: 0 auto;
        width: 649px;
        overflow: hidden;
        text-overflow:ellipsis;
        white-space: nowrap;
        .titles {
          height: 64px;
          line-height: 74px;
          font-size:26px;
          color:rgba(77,77,77,1);
        }
        .time {
          font-size:18px;
          color:rgba(153,153,153,1);
          border-bottom: 1px solid #f2f2f2;
        }
        .content {
          font-size:20px;
          color:rgba(124,124,124,1);
          line-height:44px;
          overflow : hidden;
					text-overflow: ellipsis;
					display: -webkit-box;
					-webkit-line-clamp: 1;
					-webkit-box-orient: vertical;
        }
    }
  }
</style>
